<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet/less" type="text/css" href="css/xStyle.less"/>
    <script type="text/javascript" src="js/lib/less.js"></script>
	</head>
	<body>
		<div id ="xxx1"></div>
	</body>
    <script type="module">
	import  xPivot from './js/src/xPivot.js';
	import {sale1} from './js/data/pivot-data1.js';
    import {format} from "./js/src/xUtil.js";
	
	function setStyle(item){
		
		if(item){
			if((item.sales-0)>4000)
		    return "primary"
		else if((item.sales-0)>3000) 
		    return "success";
		else return ""    
		}
		
	}
	
	function getRate(data){
	    let rate = format((data.sales-data.lastSales)/data.lastSales,"#.0%");
	    let color = (data.sales-data.lastSales)/data.lastSales >0.05?"red":"#000";
        return  `<span type="data" style="color:${color}">${rate}</span>`;
	}
	
    let cfg ={
     	  el:"xxx1",
     	  data:sale1,
     	  keysY:[{$code:"cityCode",$name:"cityName",title:"城市",width:"100px"},
     	  {$code:"Quarter",title:"季度",width:"100px",filter:true},
     	  	      
     	          {$code:"regionCode",$name:"regionName",title:"地区",width:"100px"}
     	         ],
     	  keysX:[{$code:"color",$name:"colorName",title:"颜色",width:"100px",filter:true},
     	         {$code:"size",$name:"sizeName",title:"尺寸",width:"100px"}
     	          ],
     	  values:[{$data:"sales",title:"销售",format:"#.0",width:"80px",align:"right",style:setStyle,titleAlign:"right"},
     	          {$data:"lastSales",title:"去年同期",format:"#.0",width:"80px",align:"right",style:setStyle,titleAlign:"right"},
     	    
     	          {type:"callback",callback:getRate,title:"同比",width:"80px",align:"right",titleAlign:"right",format:"#.0%"}
     	     ],
     	  valuesOn:'X'
     }
     
     let xp = new xPivot(cfg).init();
    
	</script>
</html>
